<template>
  <div class="banner">
    <div class="block text-center">
<!--      <el-carousel
          class="carousel"
          :interval="2500"
          type="card"
          height="200px"
          :initial-index="0"
          ref="carousel"
          :autoplay="true"
          arrow="always"
          v-if="Listimgurl.length>0"
      >
        <el-carousel-item v-for="(item, index) in Listimgurl " :key="index" >
          <img :src="item.imgUrl.startsWith('http') ? item.imgUrl : `${this.$NuoYiUrl}${item.imgUrl}`" alt="案例展示" class="carousel-image"/>
&lt;!&ndash;          <img :src="`${item}`" alt="案例展示" class="carousel-image"/>&ndash;&gt;
        </el-carousel-item>
      </el-carousel>-->
      <el-carousel  class="carousel"
                    :interval="2500"
                    height="200px"
                    :initial-index="0"
                    ref="carousel"
                    :autoplay="true"
                    arrow="always"
                    v-if="Listimgurl.length>0">
        <el-carousel-item v-for="(item, index) in Listimgurl " :key="index" >
          <img :src="item.imgUrl.startsWith('http') ? item.imgUrl : `${this.$NuoYiUrl}${item.imgUrl}`" alt="案例展示" class="carousel-image"/>
          <!--          <img :src="`${item}`" alt="案例展示" class="carousel-image"/>-->
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
<!--4个链接-->
  <div class="server-info" >
    <!--点击跳转到物流追踪页面-->
    <a href="javascript:void(0);" style="border-bottom:dashed 1px #ffffff;border-right: dashed 1px #ffffff ">
      <i class="iconfont icon-dingwei"></i> {{$store.state.isChinese?'物流追踪':'отслеживание грузов'}}
    </a>
    <a href="javascript:void(0);"style="border-bottom: dashed 1px #ffffff">
      <i class="iconfont icon-search"></i> {{$store.state.isChinese?'时效查询':'отслеживание сроков доставки'}}
    </a>
    <a href="javascript:void(0);" style="border-right: dashed 1px #ffffff"><i class="iconfont icon-dianzan"></i> {{$store.state.isChinese?'在线下单':'заказ онлайн'}}</a>
    <a href="javascript:void(0);" ><i class="iconfont icon-zixun"></i> {{$store.state.isChinese?'客服支持':'клиентская поддержка'}}</a>
  </div>
<!--  公司优势-->
  <div class="CompanyIntroduce">
    <div class="CompanyIntroduceTitle">
      <div class="CompanyName">{{$store.state.isChinese?'公司优势':'Преимущества компании'}}</div>
      <div class="line"></div>
      <div class="CompanyContent">
        <p >
          {{$store.state.isChinese?this.configZiduan.goodatCn:this.configZiduan.goodatRa}}
        </p>
      </div>
    </div>
    <div style="width: 360px; height: 100%; margin: 0 auto">
      <el-card style="width: 360px; height: 100%" class="elCard">
        <img :src="configZiduan?.goodatImgUrl1?.startsWith('http') ? configZiduan.goodatImgUrl1 : `${this.$NuoYiUrl}${configZiduan.goodatImgUrl1 }`"
          alt=""
          class="pic"
        />
        <div class="content">
          <div class="title">{{$store.state.isChinese?this.configZiduan.goodatshort1Cn:this.configZiduan.goodatshort1Ra}}</div>
        </div>
        <div class="type">{{$store.state.isChinese?'风速达':'Группа Фэнь Сюда'}}</div>
        <div class="desc">{{$store.state.isChinese?this.configZiduan.goodatshort1descCn:this.configZiduan.goodatshort1descRa}}</div>
      </el-card>
      <el-card style="width: 360px; height: 100%" class="elCard">
        <img :src="configZiduan?.goodatImgUrl2?.startsWith('http') ? configZiduan.goodatImgUrl2 : `${this.$NuoYiUrl}${configZiduan.goodatImgUrl2}`"
             alt=""
             class="pic"
        />
        <div class="content">
          <div class="title">{{$store.state.isChinese?this.configZiduan.goodatshort2Cn:this.configZiduan.goodatshort2Ra}}</div>
        </div>
        <div class="type">{{$store.state.isChinese?'风速达':'Группа Фэнь Сюда '}}</div>
        <div class="desc">{{$store.state.isChinese?this.configZiduan.goodatshort2descCn:this.configZiduan.goodatshort2descRa}}</div>
      </el-card>
      <el-card style="width: 360px; height: 100%" class="elCard">
        <img :src="configZiduan?.goodatImgUrl3?.startsWith('http') ? configZiduan.goodatImgUrl3 : `${this.$NuoYiUrl}${configZiduan.goodatImgUrl3 }`"
             alt=""
             class="pic"
        />
        <div class="content">
          <div class="title">{{$store.state.isChinese?this.configZiduan.goodatshort3Cn:this.configZiduan.goodatshort3Ra}}</div>
        </div>
        <div class="type">{{$store.state.isChinese?'风速达':'Группа Фэнь Сюда'}}</div>
        <div class="desc">{{$store.state.isChinese?this.configZiduan.goodatshort3descCn:this.configZiduan.goodatshort3descRa}}</div>
      </el-card>
      <el-card style="width: 360px; height:100%" class="elCard">
        <img :src="configZiduan?.goodatImgUrl4?.startsWith('http') ? configZiduan.goodatImgUrl4 : `${this.$NuoYiUrl}${configZiduan.goodatImgUrl4}`"
             alt=""
             class="pic"
        />
        <div class="content">
          <div class="title">{{$store.state.isChinese?this.configZiduan.goodatshort4Cn:this.configZiduan.goodatshort4Ra}}</div>
        </div>
        <div class="type">{{$store.state.isChinese?'风速达':'Группа Фэнь Сюда'}}</div>
        <div class="desc">{{$store.state.isChinese? this.configZiduan.goodatshort4descCn:this.configZiduan.goodatshort4descRa}}</div>
      </el-card>
      <el-card style="width: 360px; height: 100%" class="elCard">
        <img :src="configZiduan?.goodatImgUrl5?.startsWith('http') ? configZiduan.goodatImgUrl5 : `${this.$NuoYiUrl}${configZiduan.goodatImgUrl5 }`"
             alt=""
             class="pic"
        />
        <div class="content">
          <div class="title">{{$store.state.isChinese?this.configZiduan.goodatshort5Cn:this.configZiduan.goodatshort5Ra}}</div>
        </div>
        <div class="type">{{$store.state.isChinese?'风速达':'Группа Фэнь Сюда'}}</div>
        <div class="desc">{{ $store.state.isChinese?this.configZiduan.goodatshort5descCn:this.configZiduan.goodatshort5descRa}}</div>
      </el-card>
    </div>
  </div>
  <!-- 四大专线 -->
  <div class="Companyzhuanxian">
    <div class="server">
      <div class="servertopic">
        <div class="servertitle">{{$store.state.isChinese?'四大专线':'Четыре главные специализированные линии'}}</div>
        <div class="line"></div>
        <div class="subtitle"  style="padding: 16px">
          <p class="pcorlor">
            {{$store.state.isChinese?this.configZiduan.sdzxCn:this.configZiduan.sdzxRa}}
          </p>
        </div>
      </div>
      <div class="nocongtent" style="height: 20px"></div>
      <div class="container">
        <div class="zhuangxian">
          <div class="max-1200 u-flex u-flex-wrap h-100">
            <a href="javascript:void(0);" class="">{{$store.state.isChinese?this.configZiduan.sdzxtitle1Cn:this.configZiduan.sdzxtitle1Ra}}</a>
            <a href="javascript:void(0);" class="">{{$store.state.isChinese?this.configZiduan.sdzxtitle2Cn:this.configZiduan.sdzxtitle2Ra}}</a>
            <a href="javascript:void(0);" class="">{{$store.state.isChinese?this.configZiduan.sdzxtitle3Cn:this.configZiduan.sdzxtitle3Ra}}</a>
            <a href="javascript:void(0);" class="">{{$store.state.isChinese?this.configZiduan.sdzxtitle4Cn:this.configZiduan.sdzxtitle4Ra}}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 强势路线 -->
  <div class="Companyzhuanxian">
    <div class="server">
      <div class="servertopic">
        <div class="servertitle">{{$store.state.isChinese?'强势路线':'Линии с высокими степенями силы'}}</div>
        <div class="line"></div>
        <div class="subtitle">
          <p class="pcorlor">
            {{$store.state.isChinese?'风速达集团在中俄国际物流通道建设方面实力雄厚':'Группа Фэнь Сюда (Fengsuda Group) обладает мощными возможностями в строительстве международных логистических каналов между Китаем и Россией.'}}<br />
            {{$store.state.isChinese?'为了顺应中俄贸易的各种趋势，倾力研究并打造了多个运输渠道。':'Для адаптации к различным тенденциям торговли между Китаем и Россией, группа Фэнь Сюда (Fengsuda Group) приложила все усилия к исследованию и созданию нескольких транспортных каналов'}}
          </p>
        </div>
      </div>
      <div class="nocongtent" style="height: 20px"></div>
      <div class="container">
        <div class="zhuangxian">
          <div class="max-1200 u-flex u-flex-wrap h-100">
            <a href="javascript:void(0);" class="active">{{$store.state.isChinese?'慢陆':'Медленный грузовик'}}</a>
            <a href="javascript:void(0);" class="active">{{$store.state.isChinese?'快陆':'Быстрый грузовик'}}</a>
            <a href="javascript:void(0);" class="active">{{$store.state.isChinese?'铁路':'Троллейбус'}}</a>
            <a href="javascript:void(0);" class="active">{{$store.state.isChinese?'空运':'Авиационная перевозка'}}</a>
            <a href="javascript:void(0);" class="active">{{$store.state.isChinese?'海运':'Грузоперевозки по морю'}}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 车运内容-->
  <div class="server-content">
    <div>
      <div class="CompanyName">{{$store.state.isChinese?'中俄一车通零担拼车':'Китай-Россия единый транспортный подъезд для объединённых грузовых перевозок'}}</div>
      <div class="line"></div>
    </div>
    <div class="content">
      {{$store.state.isChinese?this.configZiduan.zeycdCn:this.configZiduan.zeycdRa}}
    </div>
  </div>
  <!-- 关于我们 -->
  <div class="about-us">
    <div class="about">
      <div class="title-box">
        <div class="servertitle">{{$store.state.isChinese?'关于我们':'О нас'}}</div>
        <div class="line"></div>
        <div class="content1">
          <p class="pcorlor1">
            {{$store.state.isChinese?this.configZiduan.aboutusCn:this.configZiduan.aboutusRa}}
          </p>
        </div>
      </div>
      <div class="about-content">
        <div class="about-up">
          <div class="up1">
           {{$store.state.isChinese?this.configZiduan.aboutusdescCn:this.configZiduan.aboutusdescRa}}
          </div>
          <div class="up2">
            <a class="btn1" @click="$router.push('/about')">{{$store.state.isChinese?'了解更多':'Узнать больше'}}</a>
          </div>
        </div>
      </div>
      <div class="img-box">
        <img
          :src="configZiduan?.aboutusPic?.startsWith('http') ? configZiduan.aboutusPic : `${this.$NuoYiUrl}${configZiduan.aboutusPic }`"
        />
      </div>
    </div>
  </div>
  <!-- 公司案列展示 -->
  <div class="CompanyBusiness" style="margin-top:10px;margin-bottom:20px">
    <div class="server">
      <div class="servertopic">
        <div class="servertitle">{{$store.state.isChinese?'公司案例展示':'Примеры работы'}}</div>
        <div class="line"></div>
        <div class="subtitle">
          <p class="pcorlor" style="font-size: 12px;color: #ffffff;margin-top:10px">
            {{$store.state.isChinese?'展示公司在中俄贸易中的成功案例，让您更加了解我们。':'Показываем, как компания справляется с задачами в сфере торговли между Китаем и Россией. Это позволяет вам понять, как мы работаем, и узнать, какие услуги мы можем предложить.'}}
          </p>
        </div>
      </div>
      <div class="Btn">
        <el-button
          :class="{ 'active-button': activeButton === '专线服务' }"
          size="large"
          style="margin-top: 20px; margin-bottom: 20px;width: auto;font-size: 10px"
          @mousedown="setActiveButton('专线服务')"
          @mouseup="aa('专线服务')"
        >
          {{$store.state.isChinese?'专线服务':'Специализированные линии'}}
        </el-button>
        <el-button
          :class="{ 'active-button': activeButton === '运输服务' }"
          size="large"
          style="margin-top: 20px; margin-bottom: 20px;width: auto;font-size: 10px"
          @mousedown="setActiveButton('运输服务')"
          @mouseup="aa('运输服务')"
        >
          {{$store.state.isChinese?'运输服务':'Транспортные услуги'}}
        </el-button>
      </div>
      <div class="lunbotu">
        <el-carousel
         class="carousel"
          :interval="2500"
          type="card"
          height="200px"
          :initial-index="4"
          ref="carousel"
          :autoplay="auto"
        >
          <el-carousel-item v-for="(item, index) in items" :key="index">
            <img :src="item" alt="案例展示" class="carousel-image"/>
          </el-carousel-item>
        </el-carousel>
      </div>

    </div>
  </div>
</template>
<script>
//引入css文件
import "../assets/css/shouye.css";
import "../assets/css/zhuanxian.css";
import page2 from "../assets/img/2.png";
import page1 from "../assets/img/1.png";
import page3 from "../assets/img/3.png";
import page4 from "../assets/img/4.png";
import page5 from "../assets/img/5.png";
import page6 from "../assets/img/6.png";

import EventBus  from '../eventBus';
export default {
  name: "shouye",
  data() {
    return {
      currentIndex: 0,
      activeButton: "专线服务", //
      items: [
      page1,
      page6,
      page2,
      page3,
      page4,
      page5,
      ],
      auto: true, // 所有轮播图的内容
      Listimgurl:[], // 轮播图接口数据
      configZiduan:{} ,// 配置动态字段数据
      isChinese:true // 是否是中文
    };
  },
  computed: {},
  components: {},
  mounted() {
    this.lunbo();
    const Ziduan = localStorage.getItem('configZiduan')
    console.log("本地存储的配置数据："+Ziduan);
    this.configZiduan = JSON.parse(Ziduan);
    // 监听语言变化事件
    EventBus.on('languageChanged', (newIsChinese) => {
      this.isChinese = newIsChinese;
    });
    console.log(this.isChinese);
  },
  beforeDestroy() {
    // 确保在组件销毁之前停止监听事件
    EventBus.off('languageChanged');
  },
  methods: {
    /*顶部轮播图接口*/
    async lunbo(){
      const {data:res} = await this.$http.get("/banner/listBanner");
      // const {data:res} = await this.$http.post("/banner/listBanner",);
      console.log("轮播图接口：",res)
      console.log(this.configZiduan);
      const JSONdata = JSON.stringify(this.$NuoYiUrl);
      console.log(JSONdata);
      if(res.code===200){
        this.$nextTick(() => {
          // 这个回调将在DOM更新完成后被调用
          console.log('The message has been updated:', this.message);
          this.Listimgurl = res.list;
        });
      }
    },
    /* 案例展示轮播图部分 */
    setActiveButton(buttonName) {
      this.activeButton = buttonName; // 更新当前激活的按钮
      if (buttonName === "专线服务") {
        this.currentIndex = 1; // 显示第二张图（索引从0开始）
      } else if (buttonName === "运输服务") {
        this.currentIndex = 4; // 显示第五张图（索引从0开始）
      }
      this.$refs.carousel.setActiveItem(this.currentIndex);
      this.auto = false;
    },
    aa(buttonName) {
      this.activeButton = buttonName; // 更新当前激活的按钮
      if (buttonName === "专线服务") {
        this.currentIndex = 1; // 显示第二张图（索引从0开始）
      } else if (buttonName === "运输服务") {
        this.currentIndex = 4; // 显示第五张图（索引从0开始）
      }
      this.auto = true; // 开启自动轮播
    },

    // /*config动态字段*/
    // async getConfig() {
    //   const {data: res} = await this.$http.get(
    //       "/configs/findOneConfigs"
    //   );
    //   console.log("配置动态字段：", res);
    //   if (res.code === 200) {
    //     this.configZiduan =res.list[0];
    //   }
    //   console.log(this.configZiduan+"动态字段");
    // }

  },
};
</script>
